<template>
  <div class=".box">
    <img src="http://liufusong.top:8080/img/profile/bg.png" alt="背景图" />
    <div class="My_info__eOYeg">
      <div class="My_myIcon__3cKIV">
        <img src="http://liufusong.top:8080/img/profile/avatar.png" alt="" />
        <p>游客</p>
        <van-button type="primary" to="/login" color="#21b97a"
          >去登录</van-button
        >
      </div>
    </div>
    <div class="list">
      <van-grid :column-num="3">
        <van-grid-item
          v-for="item in iconList"
          :key="item.icon"
          :icon="item.icon"
          :text="item.text"
        />
      </van-grid>
    </div>
    <div class="bottom">
      <img src="http://liufusong.top:8080/img/profile/join.png" alt="">
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      iconList: [
        { icon: 'star-o', text: '我的收藏' },
        { icon: 'wap-home-o', text: '我的出租' },
        { icon: 'clock-o', text: '看房记录' },
        { icon: 'credit-pay', text: '成为房主' },
        { icon: 'manager-o', text: '个人资料' },
        { icon: 'service-o', text: '联系我们' }
      ]
    }
  }
}
</script>

<style scoped>
.box {
  position: relative;
}
img {
  width: 100%;
}
.My_info__eOYeg {
  position: absolute;
  background: #fff;
  width: 75%;
  /* height: 55%; */
  height: 180px;
  /* top: 0px; */
  bottom: 350px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 10px 3px #ddd;
  margin: 50px auto 0;
  padding: 0 20px;
  text-align: center;
  font-size: 13px;
}
.My_myIcon__3cKIV {
  position: relative;
  transform: translateY(-50%);
  border-radius: 50%;
  width: 70px;
  height: 70px;
  border: 5px solid #f5f5f5;
  display: inline-block;
  box-shadow: 0 2px 2px #bdbdbd;
  text-align: center;
}
.My_myIcon__3cKIV p {
  margin: 20px;
}
.van-button--normal {
  padding: 0 0.3rem;
}
/* .van-grid {
} */
.list {
  margin-top: 150px;
}
.bottom {
  padding: 10px 20px;
}
.bottom img {
  width: 100%;
}
</style>
